{% extends "base.html" %}
{% block breadcrumb_current %}
    库存管理 > 审批出入库申请
{% endblock %}
{% block content %}

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endfor %}
{% endif %}     

    <div class="bg-light p-3 shadow-sm">
        <h5 style="color: #417690;">
            审批县区的出入库申请
            <a href="{% url 'navigation' %}" class="btn btn-secondary btn-sm float-end">返回首页</a></h5>
        </div>
    <div>
<div class="container mt-4">
    <!-- 表格展示，初始隐藏 -->
    <table id="desktop-view" class="table table-hover" style="margin-top: 15px; display: none;">
        <thead>
            <tr>
                <th>申请内容</th>
                <th>当前库存</th>
                <th>申请理由</th>
                <th>申请人</th>
                <th>历史记录</th>
                <th>审批操作</th>
            </tr>
        </thead>
        <tbody>
            {% if pending_records %}
                {% for record in pending_records %}
                    <tr class="custom-row-color">
                        <td>{{ record.inventory.warehouse.warehouse }}{{ record.get_operatemode_display }}{{ record.inventory.material.material }}{{ record.quantity }}{{ record.inventory.material.measureunit }}</td>
                        <td>{{ record.quantity_before }}{{ record.inventory.material.measureunit }}</td>
                        <td>{{ record.reason }}</td>
                        
                        <td>{{ record.operator.realname }}{{ record.operatedate|date:"Y-m-d" }}</td>
                        <td>
                            <a href="#" class="text-info text-decoration-none">查看</a>
                        </td>                    <td>
                            <form method="post" action="{% url 'approve_inventory_record' record.id %}">
                                {% csrf_token %}
                                <div class="mb-1">
                                    <input type="text" name="approval_opinion" class="form-control w-50" id="approval_opinion_{{ record.id }}" placeholder="请输入审批意见">
                                </div>
                                <button type="submit" name="action" value="approve" class="btn btn-success btn-sm" style="margin-left: 15px;">同意</button>
                                <button type="submit" name="action" value="reject" class="btn btn-danger btn-sm" style="margin-left: 15px;">拒绝</button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
            {% else %}
                <tr><td colspan="9" class="text-center">暂无待审批记录</td></tr>
            {% endif %}
        </tbody>
    </table>

    <!-- 卡片展示，初始隐藏 -->
    <div id="mobile-view" style="display: none;">
        {% if pending_records %}
            {% for record in pending_records %}
                <div class="card mb-3">
                    <div class="card-body">
                        <h5 class="card-title">申请内容</h5>
                        <p class="card-text">
                            <strong>仓库:</strong> {{ record.inventory.warehouse.warehouse }}<br>
                            <strong>操作:</strong> {{ record.get_operatemode_display }}{{ record.inventory.material.material }}{{ record.quantity }}{{ record.inventory.material.measureunit }}<br>
                            <strong>当前库存:</strong> {{ record.quantity_before }}{{ record.inventory.material.measureunit }}<br>
                            <strong>申请理由:</strong> {{ record.reason }}<br>
                            <strong>申请人:</strong> {{ record.operator.realname }}{{ record.operatedate|date:"Y-m-d" }}
                        </p>
                        <a href="#" class="btn btn-info mb-2">查看历史记录</a>
                        <form method="post" action="{% url 'approve_inventory_record' record.id %}">
                            {% csrf_token %}
                            <div class="mb-1">
                                <input type="text" name="approval_opinion" class="form-control" id="approval_opinion_{{ record.id }}" placeholder="请输入审批意见">
                            </div>
                            <button type="submit" name="action" value="approve" class="btn btn-success me-2">同意</button>
                            <button type="submit" name="action" value="reject" class="btn btn-danger">拒绝</button>
                        </form>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="card mb-3">
                <div class="card-body text-center">
                    暂无待审批记录
                </div>
            </div>
        {% endif %}
    </div>

    <!-- 设备检测脚本 -->
    <script>
        function isMobile() {
            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        }

        document.addEventListener('DOMContentLoaded', function() {
            const desktopView = document.getElementById('desktop-view');
            const mobileView = document.getElementById('mobile-view');

            if (isMobile()) {
                mobileView.style.display = 'block';
            } else {
                desktopView.style.display = 'table';
            }
        });
    </script>
</div>
{% endblock %}